<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>String Encryption</title>
		<style type="text/css">
			html,body {
				margin:0;
				padding:0;
				font-family:Tahoma;
				font-size:12px;
			}
			input,textarea,select {
				font-family:Tahoma;
				font-size:12px;
			}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="../../jquery.jcryption.js"></script>
        <script type="text/javascript" src="script.js"></script>
		<script type="text/javascript">
			// Loader gif image string
			var $loader = $('<img src="loading.gif" alt="Loading..." title="Loading..." style="margin-right:15px;" />');
			$(function() {
				/**
				* Creates a random string
				* @returns {string} A random string
				*/
				function randomString() {
					var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
					var string_length = 128;
					var randomstring = '';
					for (var i=0; i<string_length; i++) {
						var rnum = Math.floor(Math.random() * chars.length);
						randomstring += chars.substring(rnum,rnum+1);
					}
					//randomstring += cursor.x;
					//randomstring += cursor.y;
					return randomstring;
				}
				// Initialize the password variable
				var password;
				// If a connection hasn't been made
				if(!sessionStorage.isConnected){
					// Create a random AES key
					var hashObj = new jsSHA(randomString(), "ASCII");
					password = hashObj.getHash("SHA-512", "HEX");
					// Authenticate with the server
					$.jCryption.authenticate(password, "encrypt.php?generateKeypair=true", "encrypt.php?handshake=true", function(AESKey) {
						// Enable the buttons and the textfield
						$("#text, #send,#clearSessionStorage").attr("disabled",false);
						$("#status").html('<span style="font-size: 16px;">Let\'s Rock!</span>');
						// Save the current AES key into the sessionStorage
						sessionStorage.setItem("isConnected","1");
						sessionStorage.setItem("password",password);
					}, function() {
						// Authentication failed
						alert('Authentication failed');
					})
				} else {
					// Enable the buttons and the textfield
					$("#text, #send,#clearSessionStorage").attr("disabled",false);
					$("#status").html('<span style="font-size: 16px;">Let\'s Rock!</span>');
					// Store the password from sessionStorage in the password variables
					password = sessionStorage.password;
				}

				$("#send").click(function() {
					// Encrypt the data with the AES key
					var encryptedString = $.jCryption.encrypt($("#text").val(), password);
					// logging
					$("#log").prepend("\n").prepend("----------");
					$("#log").prepend("\n").prepend("Plaintext: " + $("#text").val());
					$("#log").prepend("\n").prepend("Encrypted: " + encryptedString);
					// Send the data to the server
					$.ajax({
						url: "encrypt.php?",
						dataType: "json",
						type: "POST",
						data: {
							jCryption: encryptedString
						},
						success: function(response) {
							// Logging
							$("#log").prepend("\n").prepend("Served sent: " + response.data);
							$("#log").prepend("\n").prepend("Decrypted: " + $.jCryption.decrypt(response.data,password));
						}
					});
				});
				$("#clearSessionStorage").click(function(e) {
                    // Clear the session storage
					sessionStorage.clear();
					// Refresh the page
					window.location = window.location;
                });
			});
		</script>
	</head>
	<body>
    	<p>&nbsp;Note: This example uses HTML5 localStorage, so it won't have to do a handshake every time the page is refreshed.</p>
		<p id="status"><span style="font-size: 16px;">&nbsp;Encrypting channel ...</span> <img src="loading.gif" alt="Loading..." title="Loading..." style="margin-right:15px;" /></p>
		String: <input type="text" id="text" disabled="disabled" /><button id="send" disabled="disabled">Send</button><button id="clearSessionStorage" disabled="disabled">Clear sessionStorage</button><br/>
		Log:<br/>
		<textarea cols="60" rows="25" id="log"></textarea>
	</body>
</html>
